<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>计算器</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="node_modules/_vue@2.6.10@vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    	<input type="text" v-model.number="inp1">
    	<select v-model="opt">
    		<option>+</option>
    		<option>-</option>
    		<option>*</option>
    		<option>/</option>
    	</select>
    	<input type="text" v-model.number="inp2">
    	<button @click="btn">=</button>
    	<input type="text" v-model.number="inp3">
    </div>
    <script type="text/javascript">
    	var app = new Vue({
    		el:'#app',
    		data(){
    			return{
    				inp1:0,
    				opt:'+',
    				inp2:0,
    				inp3:0
    			}
    		},
    		methods:{
    			btn(){
	    			switch(this.opt){
	    				case "+":
	    				this.inp3=this.inp1+this.inp2;
	    				break;
	    				case "-":
	    				this.inp3=this.inp1-this.inp2;
	    				break;
	    				case "*":
	    				this.inp3=(this.inp1)*(this.inp2);
	    				break;
	    				case "/":
	    				this.inp3=(this.inp1)/(this.inp2);
	    				break;
	    			}
    			}

    		}
    	});
    </script>
</body>
</html>